import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import VChart from 'vue-echarts'
import { permission, role } from '@/utils/permission'
import { useAuthStore } from '@/stores/auth'
import { usePermissionStore } from '@/stores/permission'
import type { RouteRecordRaw } from 'vue-router'

const app = createApp(App)

// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 注册权限指令
app.directive('permission', permission)
app.directive('role', role)

const pinia = createPinia()
app.use(pinia)

// 在路由挂载前，先初始化 auth store
const authStore = useAuthStore()
authStore.init()

app.use(router)
app.use(ElementPlus, {
  locale: zhCn,
})
app.component('v-chart', VChart)

const whiteList = ['/login', '/404'] // 无需重定向的白名单

router.beforeEach(async (to, from, next) => {
  console.log('路由守卫触发，目标路径:', to.path)
  const permissionStore = usePermissionStore()
  const auth = useAuthStore() 

  const hasToken = auth.token
  console.log('是否有token:', hasToken)

  if (hasToken) {
    if (to.path === '/login') {
      // 如果已登录，重定向到主页
      console.log('已登录，重定向到首页')
      next({ path: '/home' })
    } else {
      // 检查用户是否已获取其权限信息
      const hasUser = auth.user !== null
      console.log('是否有用户信息:', hasUser)
      
      if (hasUser) {
        console.log('用户已获取信息:', auth.user)
        console.log('用户权限列表:', auth.user.permissions)
        console.log('当前permissionStore中的路由数量:', permissionStore.routes.length)
        
        // 如果 permission store 中没有路由，说明是首次加载或刷新
        if (permissionStore.routes.length === 0) {
          try {
            console.log('开始生成可访问路由...')
            // 根据权限列表生成可访问的路由
            const accessRoutes = await permissionStore.generateRoutes()
            console.log('生成的路由数量:', accessRoutes.length)
            console.log('生成的路由列表:', accessRoutes.map(route => ({ name: route.name, path: route.path })))
            
            // 动态添加可访问的路由
            accessRoutes.forEach(route => {
              console.log('添加路由:', route.name, route.path)
              router.addRoute(route as RouteRecordRaw)
            })
            
            // 打印当前所有路由
            console.log('当前路由表:', router.getRoutes().map(route => ({ name: route.name, path: route.path })))
            
            // 重新导航到目标路由，确保新路由已经被添加
            next({ ...to, replace: true })
          } catch (error) {
            console.error('生成路由时出错:', error)
            // 移除token并跳转到登录页
            await auth.logout()
            next(`/login?redirect=${to.path}`)
          }
        } else {
          // 已有路由，直接放行
          console.log('已有路由，直接放行')
            next()
        }
      } else {
         // 有token但无用户信息，强制重新登录
         console.error('有token但无用户信息，强制重新登录')
         await auth.logout()
         next(`/login?redirect=${to.path}`)
      }
    }
  } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      console.log('未登录，但在白名单中，直接进入:', to.path)
      next()
    } else {
      // 否则全部重定向到登录页
      console.log('未登录，重定向到登录页')
      next(`/login?redirect=${to.path}`)
    }
  }
})

app.mount('#app')
